<html>
  <head>
    <title>CSS变量</title>
  </head>
  <body>
    <script>
      /*
          七、CSS变量

                    uni-app 提供嫩枝CSS变量

                    css 变量                描述                 App                小程序      H5

                    --status--bar-height    系统状态栏搞对       系统状态栏高度、     25px        0
                                                                nvue 注意见下

                    --window-top         内容区域距离顶部的距离   0                   0          NavigationBar的高度

                    --window-bottpm      内部区域距离底部的距离   0                   0          TabBar的高度



                  注意：  

                        ①、var(--status-bar-height) 此变量在微信小程序环境为固定 25px ，在App里为手机时机状态栏高度。

                        ②、当设置 "navigationStyle":"custom"取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。

                           此时可以使用一个高度为 var(--status-bar-height)的 view 放在页面顶部，避免页面内容出现在状态栏。

                        ③、由于在H5端，不存在原生导航栏和 tabbar , 也是前端 div 模拟。如果设置了一个固定位置为居底 view,

                           在小程序和App端时在 tabbar 上方，但 H5 端会与 tabbar 重叠。

                           此时可使用  --window-bottom ,不管在哪个端，都是固定在tabbar上方。

                        ④、目前nvue 在App端，还不支持 --status-bar-height变量，
                        
                           替代方案是在页面 onLoad时通过 uni.getSystemInfoSync().statusBarHeight获取状态栏高度，

                           然后通过 style 绑定方式给站位 view设定高度。

                           下方提供了实例代码：

                    ★、代码块

                           快速书写 css 变量的方法是：在 css 中敲 hei，在候选助手中即可看到 3 个 css 变量。（HBuilderX 1.9.6 以上支持）


                           ①、普通页面使用css变量：

                                  <template>
                                    //  HBuilderX 2.6.3+ 新增 page-meta, 详情：https://uniapp.dcloud.io/component/page-meta
                                    <page-meta>
                                      <navigation-bar />
                                    </page-meta>
                                    <view>
                                      <view class="status_bar">
                                        // 这里是状态栏 
                                      </view>
                                      <view>状态栏下的文字</view>
                                    </view>
                                  </template>
                                  <style>
                                    .status_bar {
                                      height: var(--status-bar-height);
                                      width: 100%;
                                    }
                                  </style>



                                  <template>
                                    <view>
                                      <view class="toTop">
                                        // 这里可以放一个向上箭头，它距离底部tabbar上浮10px
                                      </view>
                                    </view>
                                  </template>
                                  <style>
                                    .toTop {
                                      bottom: calc(var(--window-bottom) + 10px);
                                    }
                                  </style>


                            ②、nvue页面获取状态栏高度

                                  <template>
                                    <view class="content">
                                      <view :style="{ height: iStatusBarHeight + 'px'}"></view>
                                    </view>
                                  </template>

                                  <、script>
                                    export default {
                                      data() {
                                        return {
                                          iStatusBarHeight: 0,
                                        };
                                      },
                                      onLoad() {
                                        this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
                                      },
                                    };
                                  </、script>
        */
    </script>
  </body>
</html>